<template>
  <div class="html">
    <!--头部-->
    <div class="top">
      <span class="top-start lineBlock borderBox">Explore<a>Start a project</a></span>
      <span class="lineBlock borderBox">KICKSTARTER</span>
      <span class="lineBlock borderBox">Search Search in</span>
    </div>
    <!--中间的灰色部分-->
    <div class="body borderBox">
      <!--正中间的白色的输入信息的部分-->
      <div class="main borderBox">
        <div class="header">
          <span>Log<span>in</span></span>
        </div>
        <div class="message">
          <!--输入信息的表单部分-->
          <form>
            <input type="email" placeholder="Email" class="block outline" :value="emailTxt"/>
            <input type="password" pattern="[\w\W]{6,16}" placeholder="Password" class="block outline" :value="passwordTxt"/>
            <span class="forgetPasaword block">Forget your password?</span>
            <button type="submit" class="loginBtn block outline">Log me in!</button>
            <span class="check block"><input type="checkbox" checked="checked" id="checkbox" class="lineBlock outline"/><label for="checkbox" class="lineBlock">Remember me</label></span>
            <span class="line-or block">
              <span class="line lineBlock"></span><span class="or lineBlock">or</span><span class="line lineBlock"></span>
            </span>
          </form>
        </div>
        <!--是否登陆脸书-->
        <div class="login-facebook">
          <button class="block outline">Log in with Facebook</button>
          <span class="text">We’ll never post anything on Facebook without your permission.</span>
        </div>
        <div class="body-footer">
          <span>New to Kickstarter?<a>Sign up!</a></span>
        </div>
      </div>
    </div>
    <!--菜单栏-->
    <div class="menu">
      <ul>
        <li class="lineBlock">Comics</li>
        <li class="lineBlock">Arts</li>
        <li class="lineBlock">Science</li>
        <li class="lineBlock">Film</li>
      </ul>
    </div>
    <!--'关于'和'帮助'-->
    <div class="choose">
      <!--'关于'部分-->
      <ul class="about lineBlock">
        <li class="title">ABOUT</li>
        <li>About us</li>
        <li>Jobs</li>
        <li>Our charter</li>
        <li>Press</li>
        <li>Stats</li>
      </ul>
      <!--'帮助'部分-->
      <ul class="HELP lineBlock">
        <li class="title">HELP</li>
        <li>About us</li>
        <li>Jobs</li>
        <li>Our charter</li>
        <li>Press</li>
        <li>Stats</li>
      </ul>
      <span class="time block">Kickstarter,PBC © 2018</span>
      <div class="drop">
        <input type="text" placeholder="English" class="outline"/>
        <input type="text" placeholder="$ US Dollar(USD)" class="outline"/>
      </div>
    </div>
    <!--底部-->
    <div class="bottom">
      <ul>
        <li class="lineBlock">Trust and safety</li>
        <li class="lineBlock">Terms of use</li>
        <li class="lineBlock">Terms of use</li>
      </ul>
    </div>
  </div>
</template>

<script>
    // noinspection JSAnnotator
    export default {
        name: "Login",
        data(){
            return{
                emailTxt:'',
                passwordTxt:''
            }
        },
        methods:{
        }
    }
</script>

<style scoped lang="scss">
  .html{
    margin: 0;
    padding: 0;
  }
  /*头部*/
  .top{
    line-height: 66px;
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.50);
    margin-bottom: 1px;
    span{
      width: 25%;
      cursor: pointer;
      padding:0 16px;
      font-size:18px;
    }
    span:nth-child(2){
      width: 50%;
      text-align: center;
      font-family: PingFangSC-Regular,serif;
      color: #2E2E2E;
      letter-spacing: 0.26px;
    }
    span:nth-child(3){text-align: right;}
     a{
      color:#047A66;
      margin-left: 10px;
    }
  }
  /*中间的灰色部分*/
  .body{
    width:100%;
    background-color:#F0F0F0;
    border-left: none;
    border-right:none;
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.50);
    /*中间填写信息的白色区块*/
    .main{
      background-color: #ffffff;
      height: 530px;
      width: 400px;
      margin: 0 auto;
      padding: 20px;
      position: relative;
      .header{
        line-height: 30px;
        font-size: 24px;
        color: #2E2E2E;
        text-align: left;
        margin-bottom: 30px;
        span{
          width: 70px;
          span{
            text-align: right;
          }
        }
      }
      .message{
        input{
          width: 360px;
          line-height: 42px;
          font-size: 14px;
          padding-left:15px;
          box-sizing: border-box;
          outline: none;
          &:focus{border: 1px solid #A07EFF;}
        }
        input:nth-child(2){
          margin-top: 18px;
          margin-bottom: 15px;
        }
        .forgetPasaword{
          cursor: pointer;
          width: 150px;
          line-height: 20px;
          color: #4621FF;
          font-size: 14px;
        }
        .loginBtn{
          cursor: pointer;
          background-color: #00A577;
          width: 360px;
          height: 42px;
          color: #ffffff;
          border: none;
          font-size: 18px;
          margin-top: 18px;
        }
        .check{
          margin-bottom: 22px;
          input{
            width: 14px;
            height: 14px;
            background-color:#0F88FF;
            vertical-align: middle;
          }
          label{
            vertical-align: middle;
            font-size: 10px;
            color: #2e2e2e;
            margin:3px 0 0 14px;
          }
        }
        .line-or{
          width:360px;
          padding: 0 16px;
          .line{
            vertical-align:middle;
            height: 2px;
            width: 149px;
            text-align:left;
            background-color:#eeeeee;
            margin-left: 0;
          }
          .or{
            width: 12px;
            height: 14px;
            margin: 0 9px;
          }
        }
      }
    }
  }
  /*!*是否登陆脸书*!*/
  .login-facebook{
    padding-top:26px;
    button{
      cursor: pointer;
      width: 360px;
      line-height: 40px;
      color:#FFFFFF;
      background-color:#3A509C;
      border: none;
      margin-bottom:10px;
      font-size:14px;
    }
    .text{
      font-size: 12px;
      color: #2e2e2e;
    }
  }
  .body-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:#FCFCFC;
    line-height: 60px;
    font-size: 12px;
    color: #2e2e2e;
    box-shadow: 0 -1px 0 0 rgba(219,222,221,0.20);
    text-align: center;
    a{color:#4621FF;}
  }
  .menu{
    line-height:50px;
    box-shadow: 0 1px 0 0 rgba(219,222,221,0.30);
    ul{
      padding:0 0 0 80px;
      li{
        margin-right: 40px;
        font-size: 18px;
        color: #2e2e2e;
      }
    }
  }
  .choose{
    padding-left: 80px;
    position: relative;
    box-shadow: 0 1px 0 0 #DBDEDD;
    ul{
      width:336px;
      font-size:18px;
      color:#2E2E2E;
      padding:30px 0 0 0;
      li{
        text-align: left;
        line-height: 25px;
      }
    }
    title{margin-bottom: 20px;}
    .time{
      width: 200px;
      line-height: 25px;
      margin-top: 45px;
    }
  }
  .drop{
    position: absolute;
    right: 100px;
    bottom: 46px;
    input{
      width: 230px;
      font-size: 18px;
      margin-left: 10px;
    }
    input:nth-child(1){width:100px;}
  }
  .bottom{
    height: 40px;
    ul{
      padding-left: 80px;
      li{
        margin-right: 25px;
        line-height: 25px;
        margin-top: 14px;
      }
    }
  }
</style>
